/* CSS Document */
/*!
 * LABELAUTY jQuery Plugin Styles
 *
 * @file: jquery-labelauty.css
 * @author: Francisco Neves (@fntneves)
 * @site: www.francisconeves.com
 * @license: MIT License
 */

/* Prevent text and blocks selection */
.labelautybox input  + label ::selection { background-color:#fff; }
.labelautybox input + label ::-moz-selection { background-color:#fff; }
/* Hide original checkboxes. They are ugly! */
.labelautybox input{ display: none !important; }
.labelautybox input + label{cursor: pointer;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none; margin-right:10px;}
/* Stylish text inside label */
.labelautybox input + label > span.labelauty-unchecked,
.labelautybox input + label > span.labelauty-checked{display: inline-block;vertical-align: middle;}
/* Stylish icons inside label */
.labelautybox input + label > span.labelauty-unchecked-image,
.labelautybox input + label > span.labelauty-checked-image
{display: inline-block;vertical-align: middle;}
/* When there's a label, add a little margin to the left */
.labelautybox input + label > span.labelauty-unchecked-image + span.labelauty-unchecked,
.labelautybox input + label > span.labelauty-checked-image + span.labelauty-checked{}
/* When not Checked */
.labelautybox input:not(:checked):not([disabled]) + label:hover{}
.labelautybox input:not(:checked) + label > span.labelauty-checked-image{display: none;}
.labelautybox input:not(:checked) + label > span.labelauty-checked{display: none;}

/* When Checked */
.labelautybox input:checked + label{}
.labelautybox input:checked:not([disabled]) + label:hover{}
.labelautybox input:checked + label > span.labelauty-unchecked-image{display: none;}
.labelautybox input:checked + label > span.labelauty-unchecked{display: none;}
.labelautybox input:checked + label > span.labelauty-checked{display: inline-block;}
.labelautybox input.no-label:checked + label > span.labelauty-checked{display: block;}
/* When Disabled */
.labelautybox input[disabled] + label{opacity: 0.5;}
<!--------------------------1-------------------->
.labelautybox1 input + label{}
.labelautybox1 input + label > span.labelauty-unchecked-image,
.labelautybox1 input + label > span.labelauty-checked-image{width:11px;height:11px;background:url(../images/checkbox.png) no-repeat left bottom; margin-right:5px;}
.labelautybox1 input + label > span.labelauty-unchecked-image{background-position:0 0;}
<!--------------------------2-------------------->
.labelautybox2 input + label{}
.labelautybox2 input + label > span.labelauty-unchecked-image,
.labelautybox2 input + label > span.labelauty-checked-image{width:22px;height:13px;background:url(../images/checkbox_pass.png) no-repeat left bottom;}
.labelautybox2 input + label > span.labelauty-unchecked-image{background-position:0 0;}
<!--------------------------3-------------------->
.labelautybox3 input + label{}
.labelautybox3 input + label > span.labelauty-unchecked-image,
.labelautybox3 input + label > span.labelauty-checked-image{width:17px;height:17px;background:url(../images/radio.png) no-repeat left bottom; margin-right:5px;}
.labelautybox3 input + label > span.labelauty-unchecked-image{background-position:0 0;}

